﻿@{
    Layout = null;
}
@model GN.Pay.Application.GatewayApp.Dto.Output.CashiePayApplyOutput
<!DOCTYPE html>
<HTML>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="~/Content/pay/core.css" rel="stylesheet" />
    <link href="~/Content/pay/payfor.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.1.js"></script>
    <title>@Model.CashierName</title>
</head>
<body>
    <!--绑定银行卡开始-->
    <div class="bind_box">
        <div class="bind_bg"></div>
        <div class="bank_xbox">
            <a href="javacsript:;" class="close">x</a>
            <div class="add_bank f16px" style="color: #333;text-align: left;border-bottom: 1px dashed #D7D7D7;">
                <span class="f18px">
                    填写信息
                </span>
            </div>
            <!--第一步填写银行卡号-->
            <div class="pay_box" style="padding:40px 0;">
                <div class="pay_item" style="position:relative;">
                    <p>银行卡号</p>：
                    <input type="text" maxlength="19" class="txt" id="bankCard" placeholder="请输入银行卡号" style="width: 268px;height: 32px;top: 6px;" />
                    <span style="color: #FF0000;margin-left: 392px;width:100px;position:absolute;top:0;display:block;" class="tishi"></span>
                </div>
                <div class="pay_item" style="border-top: none;">
                    <div class="clearfix">
                        <a class="pay_btn" href="javascript:;" id="to_step2">下一步</a>
                    </div>
                </div>
            </div>
            <!--第二步填写个人信息-->
            <div class="pay_box" id="stemp2">
                <div class="pay_item">
                    <p>银行卡号</p>：
                    <span style="margin-left: 5px;" id="bankCardText"></span>
                </div>
                <div class="pay_item">
                    <p>卡名字</p>：
                    <span style="margin-left: 5px;">贵阳银行</span>
                </div>
                <div class="pay_item">
                    <p>姓名</p>：
                    <input type="text" class="txt" id="name" />
                    <span style="color: #FF0000;left: 338px;position:absolute;top:0;display:block;" class="tishi"></span>
                </div>
                <div class="pay_item">
                    <p>身份证</p>：
                    <input type="text" maxlength="18" class="txt" id="idCard" />
                    <span style="color: #FF0000;left: 338px;position:absolute;top:0;display:block;" class="tishi"></span>
                </div>
                <div class="pay_item">
                    <p>手机号码</p>：
                    <input type="tel" maxlength="11" class="txt" id="tel" style="margin-left:12px" />
                    <span style="color: #FF0000;left: 338px;position:absolute;top:0;display:block;" class="tishi"></span>
                </div>
                <!--信用卡新增-->
                <div class="pay_item" style="display: none;">
                    <p>有效期</p>：
                    <select name="年">
                        <option value="01">01</option>
                    </select>
                    <select name="">
                        <option value="22">22</option>
                    </select>
                </div>
                <div class="pay_item" style="display: none;">
                    <p>安全码</p>：
                    <input type="text" class="code" />
                </div>
                <div class="pay_item" style="border-top: none;">
                    <div class="clearfix">
                        <a class="pay_btn" href="javascript:;" id="to_step3">下一步</a>
                        <span id="bindWran" style="font-size:20px;color:#ff0000;margin-left:15px;"></span>
                    </div>
                </div>

            </div>

            <!--第三步填写验证码-->
            <div class="pay_box" id="stemp3">
                <div class="pay_item">
                    <p>手机号</p>：
                    <span style="margin-left: 5px;" id="bindTelNum"></span>
                </div>
                <!-- <div class="pay_item">
                     <p>手机号码</p>：
                     <input type="tel" maxlength="11" class="txt" id="tel" />
                     <span style="color: #FF0000;left: 338px;position:absolute;top:0;display:block;" class="tishi"></span>
                 </div>-->
                <div class="pay_item">
                    <p>手机验证码</p>：
                    <input type="text" class="code bind_code" id="code" />
                    @*<button class="get_phone_code get_code" id="">免费获取</button>*@
                    <span style="color: #FF0000;left: 278px;position:absolute;top:0;display:block;" class="tishi"></span>
                </div>
                <div class="pay_item" style="color: #65A031;">
                    <input type="checkbox" name="" id="check" value="" style="position: relative;top: 1px;margin-right: 5px;" />
                    开通快捷支付
                    <span style="color: #FF0000;left: 108px;position:absolute;top:0;display:block;" class="tishi"></span>
                </div>
                <div class="pay_item" style="border-top: none;">
                    <div class="clearfix">
                        <a class="pay_btn" href="javascript:;" id="agree">确认绑定</a>
                        <span style="color: #FF0000;left: 108px;position:absolute;top:0;" class="tishi"></span>
                    </div>
                </div>
            </div>

            <!--支付-->
            <div class="pay_box" id="gy_zf">
                <div class="pay_item">
                    <p>手机号</p>：
                    <span style="margin-left: 5px;" id="PaytelText"></span>
                </div>
                <div class="pay_item">
                    <p>手机验证码</p>：
                    <input type="text" class="code zf_code" id="text_vcode"/>
                    <button class="get_phone_code get_code" id="get_code">获取验证码</button>
                    <span style="color: #FF0000;position:absolute;top:0;left:278px;" class="tishi"></span>
                </div>
                <div class="pay_item" style="border-top: none;">
                    <div class="clearfix">
                        <a class="pay_btn" href="javascript:;" id="to_zf">确定支付</a>
                        <span style="color: #FF0000;position:absolute;left:98px;top:0;" class="tishi"></span>
                    </div>
                </div>
            </div>
            <!--支付成功-->
            <div class="pay_box" id="zf_suc" style="padding:90px 0;font-size:30px;">
                <a href="javacsript:;" class="close">x</a>
                <div style="color:#6fba2c;text-align:center;">支付成功</div>
            </div>
            <!--添加快捷支付成功-->
            <div class="pay_box" id="add_suc" style="padding:90px 0;font-size:30px;">
                <a href="javacsript:;" class="close">x</a>
                <div style="color:#6fba2c;text-align:center;"> 添加快捷支付成功</div>
            </div>
        </div>
    </div>
    <!--绑定银行卡结束-->
    <div class="gn_payfor_content">
        <input type="hidden" id="applyId" name="orderNo" value="@Model.ApplyId" />
        <div class="gn_payfor_top clearfix">
            <img class="left" src="~/Content/pay/img/logo.jpg" />
            <p class="left">@Model.CashierName</p>
            <img class="right" src="~/Content/pay/img/step3.jpg" />
        </div>
        <div class="gn_payfor_detail">
            <div class="gn_payfor_detai_title">
                商家： @Model.MerchantName (@Model.AppName)
            </div>
            <div class="gn_payfor_detai_title">
                @Model.ExpireMessage
            </div>
            <ul class="gn_payfor_list1 clearfix">
                <li class="pl51" style="width: 30%;">订单</li>
                <li style="width: 50%;">订单名称</li>
                <li style="18%">订单金额</li>
            </ul>
            <ul class="gn_payfor_list2 clearfix">
                <li class="pl51" style="width: 30%;">@Model.OrderNo</li>
                <li style="width: 50%;">@Model.Subject @Model.Body</li>
                <li style="18%">¥ @Model.OrderMoney.ToString("N2")</li>
            </ul>
        </div>
        <div class="gn_payfor_payment">
            <div class="clearfix btn">
                @if (Model.IsShowProtocolPay())
                {
                    <a id="gn_payfor_kj2" href="javascript:;" class="@Model.ProtocolPayTitleClass()">快捷支付</a>
                }
                @if (Model.IsShowNetWorkBankPay())
                {
                    <a id="gn_payfor_kj" href="javascript:;" class="@Model.NetWorkBankPayTitleClass()" >网银支付</a>
                }
                @if (Model.IsShowThirdPartyPay())
                {
                    <a id="gn_payfor_three" href="javascript:;" class="@Model.ThirdPartyPayTitleClass()">第三方支付</a>
                }
            </div>
            <div class="gn_payfor_border">
                @if (Model.IsShowProtocolPay())
                {
                    <div id="gn_payfor_quike" class="gn_payfor_choose" style="display:@Model.ProtocolPayDisplay()">
                        <p>提示：暂时只支持贵阳银行</p>
                        <div class="instru clearfix">
                            <a href="javascript:;" class="right add" id="go_bind"><span style="margin-right: 5px;font-size: 20px;">+</span>添加快捷付款</a>
                        </div>
                        <div class="bank_list">
                            <ul>
                                @foreach (var bank in Model.BankCardList)
                                {
                                    <li>
                                        <lable class="channel-label">
                                            <input type="radio" name="GyQuike" value="@bank.Id" />
                                            <input type="hidden" id="channelId" value="@bank.ChannelId" />
                                            <input type="hidden" id="cartPhone" value="@bank.MobilePhone" />
                                        </lable>
                                        <span class="gy_bank"><img src="~/Content/pay/img/gy_bank.png" /><span class="f14px ml10">@bank.BankName</span></span>
                                        <div class="bank_wh f12px">
                                            <span style="margin-right: 10px;">
                                                @bank.CardLastNo
                                            </span>
                                            <span>
                                                储蓄卡&nbsp;|&nbsp;快捷
                                            </span>
                                        </div>
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                }
                @if (Model.IsShowNetWorkBankPay())
                {
                    <div id="gn_payfor_kj_block" class="gn_payfor_choose" style="display:@Model.NetWorkBankPayDisplay()">
                        <p>温馨提示：需开通网上银行</p>
                        @{
                            int count = Model.NetWorkBankChannels.Count;
                            for (int i = 0; i < count; i += 0)
                            {
                        <ul class="g-list-4 clearfix">
                            @{
                                        int v = i;
                                        for (int j = v; j < v + 4; j++)
                                        {
                                            var item = Model.NetWorkBankChannels[j];
                                    <li class="left">
                                        <input class="left" type="radio" name="requestUrl" id="@item.StyleFor" value="@item.ChannelId" />
                                        <label class="gn_payfor_icon left @item.Style" for="@item.StyleFor"></label>
                                    </li>
                                            i++;
                                            if (i >= count)
                                            {
                                                break;
                                            }
                                        }
                            }
                        </ul>
                                        }
                        }
                    </div>
                                }
                @if (Model.IsShowThirdPartyPay())
                {
                    <div id="gn_payfor_three_block" class="gn_payfor_choose gn_payfor_three" style="display:@Model.ThirdPartyPayDisplay()">
                        @{
                            int count = Model.ThirdPartyChannels.Count;
                            for (int i = 0; i < count; i += 0)
                            {
                                <ul class="g-list-4 clearfix">
                                    @{
                                        int v = i;
                                        for (int j = v; j < v + 4; j++)
                                        {
                                            var item = Model.ThirdPartyChannels[j];
                                            <li class="left">
                                                <input class="left" type="radio" name="requestUrl" id="@item.StyleFor" value="@item.ChannelId" />
                                                <label class="gn_payfor_icon left @item.Style" for="@item.StyleFor"></label>
                                            </li>
                                            i++;
                                            if (i >= count)
                                            {
                                                break;
                                            }
                                        }
                                    }
                                </ul>
                                        }
                        }
                    </div>
                                        }
                <div class="gn_payfor_bottom">
                    <div class="clearfix">
                        <a id="pay" class="left" href="javascript:;">确认支付</a>
                        <p class="left" style="text-align:left;color:red"><span id="errortip" style="margin-left:-244px"></span></p>
                        <p class="right">支付总金额: <span>¥ @Model.OrderMoney.ToString("N2")</span>元</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="~/Scripts/cashie/ProtocolPay.js"></script>
    <script src="~/Scripts/cashie/pay.js"></script>
    <script type="text/javascript">
        
        var connection = $.hubConnection();
        var notifyProxy = connection.createHubProxy('notifyHub');
        notifyProxy.on('notify', function (msg) {
            var obj = JSON.parse(msg);
            location.href = obj.appHomeUrl;
        });
        connection.start().done(function () {
            notifyProxy.invoke('registerApply', ($('#applyId').val()));
        });
    </script>
</body>
</HTML>